<template>
	<view>
		<view class="wifi_cavas">
			<canvas canvas-id="qrcode" ref="qrcode" style="width: 150px; height: 150px;" />
			<view>
				<button class="btn-save" @click="savecode">保存WIFI码</button>
			</view>

		</view>
	</view>
</template>

<script>
	import UQRCode from '@/uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js'
	const app = getApp()
	export default {
		data() {
			return {
				businessInfo: null,
				timer: null,
			}
		},
		onLoad() {
			uni.showLoading({
				title: '',
				mask: true
			})
			this.businessInfo = uni.getStorageSync(app.globalData.session.businessInfo)
			uni.hideLoading()
		},
		methods: {
			// 这里我才用点击事件来主动触发保存二维码
			// 在开发者工具中使用测试时，触发此方法会打开一个另存为的系统窗口
			savecode() {
				this.timer = setTimeout(() => { //在draw方法调用之后，为了避免出现异常，所以采用定时器
					uni.canvasToTempFilePath({ // 这里保存图片使用uniapp官方的方法，先获取文件临时路径
						canvasId: 'qrcode',
						fileType: 'png',
						width: '150',
						height: '150',
						success: res => {
							console.log(res) //返回字段tempFilePath就是文件的临时文件路径
							// 获取文件的临时路径之后结合saveImageToPhotosAlbu方法就可以把二维码保存到相册中
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: res => {
									uni.showToast({
										title: '保存成功',
										icon: 'success'
									})
								},
								fail: err => {
									console.log(err);
								}
							})
						},
						fail: err => {
							console.log(err);
						}
					})
				}, 1000)
			}
		},
		// 由于业务原因我选择在页面初次渲染进行绘制
		onReady: function() {
			uni.showLoading({
				title: '',
				mask: true
			})
			// 需要注意的是该方法的尺寸单位默认为px可以使用
			// 获取uQRCode实例
			var qr = new UQRCode();
			// 设置二维码内容
			qr.data = this.businessInfo.wifi_name + '&&' + this.businessInfo.wifi_password;
			// 设置二维码大小，必须与canvas设置的宽高一致
			qr.size = '150';
			// 指定二维码的边距
			qr.margin = '2';
			// 提升二维码美观度，如果关闭的话二维码中会有很明显的白色线条
			qr.useDynamicSize = true;
			// 调用制作二维码方法
			qr.make();
			// 获取canvas上下文
			var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
			// // 设置uQRCode实例的canvas上下文
			qr.canvasContext = canvasContext;
			// 调用绘制方法将二维码图案绘制到canvas上
			qr.drawCanvas();
			uni.hideLoading()
		},
		onUnload() {
			if (this.timer) {
				clearTimeout(this.timer)
				this.timer = null
			}
		}
	}
</script>

<style>
	page {
		background: #eaeaea;
	}

	.wifi_cavas {
		margin-left: 20%;
		margin-top: 10%;
	}

	.btn-save {
		background-color: #151313;
		color: white;
		border-radius: 27rpx;
		width: 50%;
		margin-left: 30rpx;
		margin-top: 10rpx;
	}
</style>